<!doctype html>
<html>
<head>
  <meta charset="utf8">
  {{#if BASE}}
  <base href="{{ BASE }}">
  {{/if}}
  <style>
  </style>
  <script src="forms/grist-form-submit.js"></script>
  <script src="forms/purify.min.js"></script>
  <link rel="stylesheet" href="forms/form.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <main class='grist-form-container'>
    <form class='grist-form'
          onsubmit="event.target.parentElement.querySelector('.grist-form-confirm').style.display = 'flex', event.target.style.display = 'none'"
          data-grist-doc="{{ DOC_URL }}"
          data-grist-table="{{ TABLE_ID }}"
          data-grist-success-url="{{ SUCCESS_URL }}"
          >
      {{ dompurify CONTENT }}
      <div class="grist-power-by">
        <a href="https://getgrist.com" target="_blank">
            <div>Powered by</div>
            <div class="grist-logo"></div>
          </a>
      </div>
    </form>
    <div class='grist-form-confirm' style='display: none'>
      <div>
        {{ SUCCESS_TEXT }}
      </div>
      {{#if ANOTHER_RESPONSE }}
      <button onclick="window.location.reload()">Submit another response</button>
      {{/if}}
    </div>
  </main>
  <script>
    // Validate choice list on submit
    document.querySelector('.grist-form input[type="submit"]').addEventListener('click', function(event) {
      // When submit is pressed make sure that all choice lists that are required
      // have at least one option selected
      const choiceLists = document.querySelectorAll('.grist-choice-list.required:not(:has(input:checked))');
      Array.from(choiceLists).forEach(function(choiceList) {
        // If the form has at least one checkbox make it required
        const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
        firstCheckbox?.setAttribute('required', 'required');
      });

      // All other required choice lists with at least one option selected are no longer required
      const choiceListsRequired = document.querySelectorAll('.grist-choice-list.required:has(input:checked)');
      Array.from(choiceListsRequired).forEach(function(choiceList) {
        // If the form has at least one checkbox make it required
        const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
        firstCheckbox?.removeAttribute('required');
      });
    });
  </script>
</body>

</html>
